<!--
 * @Description: 
 * @Date: 2023-12-20 14:44:03
 * @LastEditTime: 2024-03-04 14:12:01
-->
<template>
  <div class="dbxxFigure">
    <!-- <div>任免登记</div> -->
    <el-row :gutter="4" style="padding: 10px">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="0"
        label-position="left"
        :border="true"
      >
        <el-col style="padding: 10px">
          <el-form-item>
            <el-button class="tabs" type="danger" @click="submitForm(1)"
              >提交</el-button
            >
            <el-button class="tabs" type="warning" @click="submitForm(0)"
              >保存至草稿箱</el-button
            >
          </el-form-item>
        </el-col>
        <!-- :labelStyle="{width: '123px'}" :contentStyle="{width:'42%'}" -->
        <el-descriptions
          :column="3"
          border
          size="mini"
          style="margin-top: 10px"
          :labelStyle="{ width: '220px' }"
        >
          <el-descriptions-item label="审议议题" :span="3">
            <!-- label写成插槽 -->
            <template slot="label">
              审议议题 <span style="color: red">*</span>
            </template>
            <!-- 表單項 -->
            <el-form-item label="" prop="eventTitle" label-width="0px">
              <el-input
                id="input"
                v-model="formData.eventTitle"
                placeholder="请输入审议议题"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="议题类型">
            <!-- label写成插槽 -->
            <template slot="label">
              议题类型 <span style="color: red">*</span>
            </template>
            <!-- 表單項 -->
            <el-form-item label="" prop="eventType" label-width="0px">
              <el-select
                id="input"
                v-model="formData.eventType"
                placeholder="请选择议题类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dict.type.yitileixing"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <!--  -->
          <el-descriptions-item label="选择工委">
            <!-- label写成插槽 -->
            <template slot="label">
              选择工委 <span style="color: red">*</span>
            </template>
            <!-- 表單項 -->
            <el-form-item label="" prop="gwUserId" label-width="0px">
              <el-select
                id="input"
                v-model="formData.gwUserId"
                placeholder="请选择选择工委"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in workingCommitteeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="申请日期">
            <template slot="label">
              申请日期 <span style="color: red">*</span>
            </template>
            <!-- 表單項 -->
            <el-form-item label="" prop="createTime" label-width="0px">
              <el-date-picker
                id="input"
                v-model="formData.createTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择日期选择"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-descriptions-item>
          <!--  -->
          <el-descriptions-item label="议题内容" :span="3">
            <el-input
              id="input"
              type="textarea"
              v-model="formData.eventDetail"
            ></el-input>
          </el-descriptions-item>
          <!--  -->
          <el-descriptions-item label="附件信息" :span="3">
            <file-upload
              :formData="formData"
              url="/dev-api/system/user/profile/avatar/local"
            />
            <file-upload
              :formData="formData"
              url="/prod-api/system/user/profile/avatar/local"
            />
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { addPost, userListByRoleId } from "@/api/majorIssues/shixiang.js";
import { listRole } from "@/api/system/role";
import FileUpload from "@/components/FileUploadShiXiang";
import { getDictLabel } from "@/utils/Util.js";
export default {
  components: { FileUpload },
  props: [],
  dicts: ["yitileixing"],
  data() {
    return {
      formData: {},
      getDictLabel: getDictLabel,
      showType: "type1",
      rules: {
        eventTitle: [
          {
            required: true,
            message: "请输入审议议题",
            trigger: "change",
          },
        ],
        eventType: [
          {
            required: true,
            message: "请输入议题类型",
            trigger: "blur",
          },
        ],
        gwUserId: [
          {
            required: true,
            message: "请选择选择工委",
            trigger: "change",
          },
        ],
        // createTime: [
        //   {
        //     required: true,
        //     message: "请选择申请日期",
        //     trigger: "change",
        //   },
        // ],
      },
      // 选择工委的下拉框
      workingCommitteeOptions: [
        {
          value: 100,
          label: "张三",
        },
      ],
      field105Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      radio: 1,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getOptions();
  },
  methods: {
    getOptions() {
      // 选择工委的下拉框
      // 根据角色id查询用户。
      // listRole({pageSize:1000,pageNum:1}).then(res=>{
      userListByRoleId({ roleId: 1746812112775499777 }).then((res) => {
        this.workingCommitteeOptions = res.data.users.map((item) => {
          return {
            value: item.userId,
            label: item.userName,
          };
        });
      });
    },
    submitForm(eventStatus) {
      this.formData.gwUserName = this.getDictLabel(
        this.workingCommitteeOptions,
        this.formData.gwUserId
      );
      // 目前流程userID
      this.formData.procUserId = this.$store.state.user.userId;
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.formData.eventStatus = eventStatus;
        // TODO 提交表单
        // let api = this.openType == "edit" ? editElection : addElection;
        // let msg = this.openType == "edit" ? "修改成功" : "创建成功";
        let api = addPost;
        let msg = "创建成功";
        if (this.openType == "edit") {
          this.formData.id = this.row.id;
        }
        api(this.formData).then((res) => {
          if (res.code == 200) {
            if (this.openType == "edit") {
              this.$message({
                type: "success",
                message: msg,
              });
              // 关闭弹窗
              this.$emit("callback");
            } else {
              this.$message({
                type: "success",
                message: msg,
              });
              this.$refs.elForm.resetFields();
            }
          }
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    changeType(v) {
      this.showType = v;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  margin-left: 10px;
  width: 150px;
}

.fujian {
  display: flex;
  align-content: center;
  justify-content: space-between;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  background: #fff;
}

::v-deep #input {
  border: none;
}

.el-form-item--small.el-form-item {
  margin: 10px 0;
}
</style>
